<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族</title>
    <link rel="shortcut icon" href="../favicon-90c2e618ff.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/GoodsDetail.css">
    <link rel="stylesheet" href="../css/header_nav.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <!-- ************** 引入头部导航 start ************** -->
    <div class="MZ_header">
        <!-- 导航栏 nav -->
    </div>
    <!-- ************** 引入头部导航 end ************** -->

    <!-- ************** 头部的商品标识 star ************** -->
    <div class="MZ_topmsg">
        <div class="top">
            <ul class="goodsNames">
                <li>
                    <a href="javascript">魅族 18</a>
                </li>
                <li>
                    <a href="javascript">魅族 18 Pro</a>
                </li>
                <li>
                    <a href="javascript">魅族 17</a>
                </li>
                <li>
                    <a href="javascript">魅族 17 Pro</a>
                </li>
            </ul>
            <ul class="msg">
                <li>
                    <a href="javascript">概述</a>
                </li>
                <li>
                    <a href="javascript">参数</a>
                </li>
                <li>
                    <a href="javascript">换机指引</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- ************** 头部的商品标识 end ************** -->


    <!-- ************** 中部内容区 start ************** -->
    <div class="MZ_center">
        <div class="center">
            <!-- 放大镜 star -->
            <div class="wrap clear">
                <!-- 左边 -->
                <div class="left">
                    <!-- 上面带遮罩层的中图 -->
                    <div class="topImgBox">
                        <div class="shadow"></div>
                        <div class="imgsBox">
                            <img class="small" src="../images/a01.jpg" bigImg="../images/a01.jpg" alt="">
                            <img class="small" src="../images/a02.jpg" bigImg="../images/a02.jpg" alt="">
                            <img class="small" src="../images/a03.jpg" bigImg="../images/a03.jpg" alt="">
                            <img class="small" src="../images/a04.jpg" bigImg="../images/a04.jpg" alt="">
                        </div>
                    </div>
                    <!-- 下面四个点 -->
                    <ul class="switchList">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <!-- 左右两边的翻页 -->
                    <div class="prev"></div>
                    <div class="next"></div>

                    <!-- 定位到右边的隐藏的大图 -->
                    <div class="showBigImg">
                        <img class="bigImg" src="../images/a01.jpg" alt="">
                    </div>
                </div>
                <!-- 右边商品详情 -->
                <div class="right">
                    <div class="boxmsg">
                        <h1 class="goodsName">魅族 18</h1>
                        <p class="goodsMsg">
                            <span>【限时12期免息 | 4月13日 限量赠POP2s耳机 仅限一天】</span>骁龙 888 | 拒绝偷听 拒绝偷拍 拒绝跟踪 | 162g 6.2英寸轻妙手感 | 2K+
                            120 帧微弧柔性屏 | 超声波屏下指纹解锁 0.1s湿手解锁 | 4000mAh 超大电池 | 6400万超级防抖全场景影像系统
                        </p>
                    </div>
                    <div class="money">
                        <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>4999
                            </span>
                            或低至 ￥366.58 x 12 期
                        </p>
                    </div>
                    <div class="urlbox">
                        <p>配送到</p>
                        <div class="url">
                            湖北省&nbsp;&nbsp;&nbsp;&nbsp;武汉市&nbsp;&nbsp;&nbsp;&nbsp;▼
                        </div>
                    </div>
                    <div class="numbox">
                        <p>选择数量</p>
                        <div class="num">
                            <a class="reduce" title="减少" href="javascript:;">-</a>
                            <input class="numinput" type="text" value="1" readonly>
                            <a class="add" title="增加" href="javascript:;">+</a>
                        </div>
                    </div>
                    <div class="bysbox">
                        <div class="gomoney">
                            立即购买
                        </div>
                        <div class="goshop">
                            加入购物车
                        </div>
                    </div>
                    <div class="fbox">
                        <ul>
                            <li>
                                <img src="../images/redgou.png" alt="">
                                花呗分期
                            </li>
                            <li>
                                <img src="../images/redgou.png" alt="">
                                顺丰发货
                            </li>
                            <li>
                                <img src="../images/redgou.png" alt="">
                                以旧换新
                            </li>
                            <li>
                                <img src="../images/redgou.png" alt="">
                                7天无理由退货
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 放大镜 end -->
        </div>
    </div>
    <!-- ************** 中部内容区 end ************** -->

    <!-- ************** 隔断层 star ************** -->
    <div class="cut"></div>
    <!-- ************** 隔断层 end ************** -->

    <!-- ************** 引入尾部 star ************** -->
    <div class="MZ_footer">
    </div>
    <!-- ************** 引入尾部 end ************** -->
</body>

<script>
    //引入头部
    $(".MZ_header").load("./header_nav.html", function () {
        $.getScript("../js/header_nav.js", function () {
            console.log("头部js载入成功");
        })
    })

    //引入尾部  和 回到顶部
    $(".MZ_footer").load("common.html", function () {
        $.getScript("../js/goTop.js", function () {
            console.log("尾部和回到顶部js载入成功");
        })
    })

    // **************  标识用户身份 ************************* //
    // var cookie = document.cookie;
    // if (cookie) {
    //     var user = getCookie("lgc");
    //     if (user) {
    //         $(".header_nav .u_box .logli").html(`<a href="jacvascript;:">欢迎,${user}</a>`);
    //         $(".header_nav .u_box .registli").html(`<a href="./login.html">退出登录</a>`);
    //         $(".header_nav .u_box .registli").click(function () {
    //             setCookie("lgc", "", -1);
    //             location.reload();
    //         })
    //     }
    // } else {
    //     var user = "";
    // }





    //     var index = 0;
    //     var goWidth = $(".topImgBox").width();
    //     $(document).on("click", ".switchList li", function () {
    //         // $(this).addClass("active").siblings().removeClass("active");
    //         // var index = 0;
    //         var goWidth = $(".topImgBox").width();
    //         index = $(this).index()
    //         console.log(index); // 0 1 2 3
    //         $(".switchList li").eq(index).addClass("active").siblings().removeClass("active");
    //         $(".imgsBox").stop().animate({
    //             left: -goWidth * index
    //         });

    //         // var imgUrl = $(this).find("img").attr("bigImg");
    //         // $(".small,.bigImg").prop("src", imgUrl);
    //     }).on("click", ".left .next", function () {
    //         if (index < 3) {
    //             $(this).eq(index);
    //             index++;
    //             console.log(index); // 1 2 3
    //             $(".imgsBox").stop().animate({
    //                 left: -goWidth * index
    //             });
    //         } else {
    //             $(".imgsBox").stop().animate({
    //                 left: -goWidth * index
    //             });
    //         }

    //     }).on("click", ".left .prev", function () {

    //         var index = 0
    //         $(this).eq(index);
    //         index++;
    //         console.log(index); // 0 1 2 3

    //     })

    //把图片
    // $(document).on("click", ".switchList li", function () {
    //     $(this).addClass("active").siblings().removeClass("active");
    //     var imgUrl = $(".imgsBox").find("img").attr("bigImg");
    //     $(".small,.bigImg").prop("src", imgUrl);
    // })











    // ************************************** 页面渲染 star ***********************************//
    $(function () {
        var search = location.search;
        console.log(search);
        if (search) {
            var gid = search.split("=")[1];
            console.log(gid);
            searchGoodsById({
                gid
            }).then(result => {
                console.log(result);
                var {
                    status,
                    data
                } = result;
                if (status) {
                    var {
                        goodsId,
                        goodsName,
                        goodsMsg,
                        goodsPrice,
                        goodsImg
                    } = data;

                    //********************** 右边渲染 ************************//
                    var boxmsgHTML = `
                        <h1 class="goodsName">${goodsName}</h1>
                        <p class="goodsMsg">
                            <span>【限时12期免息 | 4月13日 限量赠POP2s耳机 仅限一天】</span>${goodsMsg}
                        </p>`
                    $(".right .boxmsg").html(boxmsgHTML);

                    var moneyHtml = ` 
                       <p class="goodsPrice">
                            <span>
                                <w class="w">￥</w>${goodsPrice}
                            </span>
                            或低至 ￥366.58 x 12 期
                        </p>`
                    $(".right .money").html(moneyHtml);



                    //********************** 左边渲染 ************************//
                    // 四张小图
                    // var imgsBoxHTML = `
                    //         <img class="small" src="${goodsImg}" alt="">
                    //         <img class="small" src="${goodsImg}" alt="">
                    //         <img class="small" src="${goodsImg}" alt="">
                    //         <img class="small" src="${goodsImg}" alt="">`
                    // $(".left .topImgBox .imgsBox").html(imgsBoxHTML);

                    var imgsBoxHTML = "";
                    var len = goodsImg.length > 4 ? 4 : goodsImg.length;
                    for (var i = 0; i < len; i++) {
                        imgsBoxHTML += `<img src="${goodsImg[i]}" bigImg="${goodsImg[i]}" alt="">`
                    }
                    $(".left .topImgBox .imgsBox").html(imgsBoxHTML);

                    var showBigImgHTML = `<img class="bigImg" src="${goodsImg[0]}" alt="">`;
                    $(".left .showBigImg").html(showBigImgHTML);





                    // *******************************  小轮播 star  ************************************************* //
                    var index = 0; //全局的index  记录轮播时的下标
                    var goWidth = $(".topImgBox").width();

                    $(".switchList li").click(function () {
                        index = $(this).index(); // 同步下标到全局的index
                        console.log("li", index);
                        move();

                        var imgUrl = $(".imgsBox").find("img").eq(index).attr("bigImg");
                        $(".small,.bigImg").prop("src", imgUrl);

                    })

                    $(".next").click(function () {
                        console.log(index); // 0
                        index++;
                        console.log("next", index); // 1
                        move();

                        var imgUrl = $(".imgsBox").find("img").eq(index).attr("bigImg");
                        $(".small,.bigImg").prop("src", imgUrl);

                    })

                    $(".prev").click(function () {
                        index--;
                        console.log("prev", index);
                        move();

                        var imgUrl = $(".imgsBox").find("img").eq(index).attr("bigImg");
                        $(".small,.bigImg").prop("src", imgUrl);

                    })

                    function move() {
                        if (index < 0) { // 第一张向左滚动  (第一张切第五张  滚动到第四张)   
                            index = $(".switchList li").length; // 第五张的下标
                            $(".imgsBox").css({
                                left: -goWidth * index
                            }) // 切换到第五张
                            index--; //   把下标改为第四张  后续会滚动到第四张 
                        }

                        if (index > $(".switchList li")
                            .length) { // 超出第五张  (因为第五张看起来像第一张  下一次应该滚动到第二张)  ???   => 第五张切第一张  滚动到第二张
                            index = 0;
                            $(".imgsBox").stop().css({
                                left: 0
                            }); //第五张切第一张
                            index++; //滚动到第二张
                        }

                        // index == $(".switchList li").length ? 0 : index
                        // 判断是否是第五张 如果是第五张  把第一个点变为活跃状态 
                        $(".switchList li").eq(index == $(".switchList li").length ? 0 : index)
                            .addClass("active").siblings().removeClass("active");

                        $(".imgsBox").stop().animate({
                            left: -goWidth * index
                        }, function () {
                            // 每次运动完毕之后判断    
                            console.log("运动执行完毕");
                            console.log("index=", index);
                            // index >= 4 (第四张滚动第五张   切到第一张)
                            if (index >= $(".switchList li").length) {
                                index = 0;
                                $(".imgsBox").stop().css({
                                    left: 0
                                })
                            }
                        })


                    }
                    // *******************************  小轮播 end  ************************************************* //

                    // *******************************  放大镜 star  ************************************************* //
                    $(".topImgBox").hover(function () {
                        $(".topImgBox .shadow").show();
                        $(".showBigImg").show();

                        $(".topImgBox").mousemove(function (event) {
                            var x = event.pageX - $(".topImgBox").offset().left - ($(
                                ".topImgBox .shadow").width() / 2)
                            var y = event.pageY - $(".topImgBox").offset().top - ($(
                                ".topImgBox .shadow").height() / 2);

                            var maxLeft = $(".topImgBox").width() - $(
                                ".topImgBox .shadow").width();
                            var maxTop = $(".topImgBox").height() - $(
                                ".topImgBox .shadow").height();
                            console.log(maxLeft, maxTop);

                            // var scale = $(".bigImg").width() / $(".small").width();
                            var scale = $(".showBigImg").width() / $(".topImgBox").width();

                            if (x < 0) x = 0;
                            if (x > maxLeft) x = maxLeft;
                            if (y < 0) y = 0;
                            if (y > maxTop) y = maxTop;

                            // 左边 移动的shadow 
                            $(".topImgBox .shadow").css({
                                left: x,
                                top: y
                            })

                            // 右边移动的是图片(bigImg 定位)
                            $(".bigImg").css({
                                left: -scale * x,
                                top: -scale * y
                            })
                        })
                    }, function () {
                        $(".topImgBox .shadow").hide()
                        $(".showBigImg").hide()
                    })
                    // *******************************  放大镜 end  ************************************************* //



                } else {
                    location.href = "./login.html?ReturnUrl=" + encodeURIComponent(location.href);
                }
            })
        } else {
            // location.href = "./index1.html";
            location.href = "./login.html?ReturnUrl=" + encodeURIComponent(location.href);
        }




        // **********************  加入购物车  star ********************* //
        // 1. 购买之前需要判断用户是否登录?

        $(".add").click(function () {
            // 输入框  数量 加一 
            var num = $(this).prev().val();
            num++;
            $(this).prev().val(num);
            // 减号显示
            $(this).prev().prev().text("-");
            // 手势  解禁
            $(this).prev().prev().css({
                cursor: "pointer"
            });
        })
        $(".reduce").click(function () {
            //1 输入框  数量 加一 
            var num = $(this).next().val();
            //  3 减之前  判断  如果数量为1  不能减
            if (num == 1) {
                return false;
            }
            num--;
            // 4 减之后  判断  如果数量为1  减号按钮的 “-” 消失   手势禁用
            if (num == 1) {
                $(this).text("");
                $(this).css({
                    cursor: "no-drop"
                });
            }
            $(this).next().val(num);
        })

        $(document).on("click", ".bysbox", function () {
            var user = getCookie("lgc");
            if (user) { // 存在lgc(用户登录时存的) 用户登录
                console.log("准备加入购物车");

                var buyNum = $(".numinput").val() * 1;
                console.log(buyNum);
                addToShoppingCar({
                    user,
                    goodsId: gid,
                    buyNum
                }).then(result => {
                    console.log(result);
                    var {
                        status,
                        detail
                    } = result;
                    if (status) {
                        if (confirm("商品购买成功,是否进入购物车?")) {
                            location.href = "shoppingCar.html";
                        }
                    } else {
                        alert(detail);
                    }
                }).catch(err => {
                    console.log(err)
                })

            } else { // 不存在
                // 用户不存在 返回登录 => 登录成功 直接进入主页了(用户体验较差)
                // location.href = "./login.html";

                // 解决方法  返回登录页时 携带数据ReturnUrl (当前页面url地址+编码)
                location.href = "./login.html?ReturnUrl=" + encodeURIComponent(location.href);
            }
        })

    })
</script>

</html>